<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">入库管理</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ path: '/logisticsSystem/addStorageList' }"
          v-if="!this.$route.params ? false : this.$route.params.type"
          ><div class="div1">
            采购入库列表
          </div></el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/addGoods' }"
          ><div class="div2">商品详情</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="baisc">
      <p class="header">基本信息</p>
      <el-form :model="baisc" class="demo-form-inline">
        <div class="nav">
          <el-form-item label="商品主图">
            <el-upload
              class="upload-demo"
              ref="upload"
              list-type="picture"
              action="#"
              :show-file-list="false"
              :auto-upload="true"
              :http-request="safeImport"
            >
              <!-- 	:limit='1'
													 :file-list="fileList" -->
              <el-button slot="trigger" size="small" type="primary"
                >点击上传</el-button
              >
            </el-upload>

            <div class="notes">
              <!-- v-for='(item,index) in fileList' :key='index' -->
              <p>
                <img
                  v-if="!is_null(imageUrl)"
                  v-image-preview
                  :src="ImgHttps + imageUrl"
                  class="avatar"
                />
                <span v-if="!is_null(imageUrl)" @click="close(index)">×</span>
              </p>
            </div>
          </el-form-item>

          <div class="stock">
            <el-form-item label="商品标题" label-width="70px">
              <el-input
                v-model="baisc.title"
                type="textarea"
                placeholder="请输入商品标题"
              ></el-input>
            </el-form-item>
          </div>

          <el-form-item label="选择品牌">
            <el-select v-model="baisc.brand" placeholder="请选择产品品牌">
              <el-option
                v-for="items in brandselect"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="品牌分类">
            <el-cascader
              v-model="baisc.category"
              :options="options"
              :props="{
                checkStrictly: true,
                label: 'name',
                value: 'id',
                children: 'children',
              }"
              clearable
            ></el-cascader>
          </el-form-item>
        </div>

        <div class="guige">
          <p class="header">规格价格</p>
          <div class="standards">
            <el-form-item label="商品规格">
              <el-radio-group
                v-model="baisc.resource"
                v-for="items in commDictonary"
                :key="items.id"
                style="margin-right:10px;"
              >
                <el-radio :label="items.id">{{ items.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="stock">
              <el-form-item label="商品重量" label-width="70px">
                <el-input
                  v-model="baisc.weight"
                  placeholder="请输入商品重量"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="商品数量"
                label-width="70px"
                v-if="baisc.resource == '件'"
              >
                <el-input
                  v-model="baisc.number"
                  placeholder="请输入商品一件的总量"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item label="商品价格" label-width="70px">
              <div class="price">
                <el-input
                  v-model="baisc.newPrice"
                  placeholder="优惠价"
                ></el-input>
                <span>元</span>
                <el-input
                  v-model="baisc.oldPrice"
                  placeholder="市场价"
                ></el-input>
                <span>元</span>
              </div>
            </el-form-item>

            <div class="stock">
              <el-form-item label="商品库存" label-width="70px">
                <el-input
                  v-model="baisc.stock"
                  placeholder="请输入商品库存"
                ></el-input>
              </el-form-item>

              <el-form-item label="商品仓库">
                <el-select
                  v-model="baisc.wareHouse"
                  placeholder="请选择商品仓库"
                >
                  <el-option
                    v-for="items in house"
                    :key="items.id"
                    :value="items.id"
                    :label="items.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>

            <el-form-item label="商品介绍">
              <el-input type="textarea" v-model="baisc.desc"></el-input>
            </el-form-item>

            <div class="stock">
              <el-form-item label="推荐商品" style="width:150px;">
                <el-switch
                  v-model="baisc.status"
                  :active-value="0"
                  :inactive-value="1"
                ></el-switch>
              </el-form-item>
              <el-form-item label="是否有赠品" style="width:150px;">
                <el-switch
                  v-model="baisc.status"
                  :active-value="0"
                  :inactive-value="1"
                ></el-switch>
              </el-form-item>
              <el-form-item label="是否绑定赠品" style="width:150px;">
                <el-switch
                  v-model="baisc.status"
                  :active-value="0"
                  :inactive-value="1"
                ></el-switch>
              </el-form-item>
              <el-form-item label="是否为赠品" style="width:150px;">
                <el-switch
                  v-model="baisc.status"
                  :active-value="0"
                  :inactive-value="1"
                ></el-switch>
              </el-form-item>
            </div>
            <el-form-item label="绑定赠品" v-if="!baisc.status">
              <el-cascader
                v-model="giftId"
                :options="optionsChexck"
                type="textarea"
                :props="{
                  multiple: true,
                  checkStrictly: true,
                  label: 'title',
                  value: 'id',
                  children: 'children',
                }"
                clearable
              ></el-cascader>
            </el-form-item>
          </div>
          <div class="jurisdictionBox">
            <p class="header">销售权限</p>
            <div class="jurisdiction">
              <el-form-item label="可以销售">
                <el-checkbox-group v-model="checkedCities">
                  <el-checkbox
                    v-for="city in selectList"
                    :key="city.dictId"
                    :label="city.dictId"
                    >{{ city.dictName }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="tolist">保存</el-button>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baisc: {
        title: "",
        brand: "",
        resource: "", //规格
        weight: "",
        newPrice: "",
        oldPrice: "",
        desc: "",
        stock: "", //库存
        cj: "",
        number: "",
        category: "",
        wareHouse: "", //仓库
        status: 0, //0上级
        gift: 0, //无赠品
        nort: "",
      },
      imageUrl: "",
      selectList: [],
      checkedCities: [], //销售权限id
      giftId: [],
      options: [],
      optionsChexck: [],
      brandselect: [],
      house: "", //仓库
      commDictonary: "", //规格
      fileList: [],
      // uploadAxios:this.https+"/sys/v1/common/upload/files?pathName=internalSystem",
      id: "",
    };
  },

  activated() {
    if (!this.$route.params.type && !this.$store.state.tabStorage) {
      this.baisc = {};
      this.imageUrl = "";
      this.checkedCities = [];
    }
    this.$store.commit("updateTabStorage", false);
    this.todetail(this.$route.params.id);
  },
  created() {
    this.brandSelect();
    this.brandSelectBox();
    this.salesScope();
    this.id = this.$route.query.id;
    if (this.id == "" || this.id == undefined) {
      // console.log('详情判断')
    } else {
      this.todetail(this.$route.params.id);
    }
    this.prodCode();
  },
  methods: {
    // 获取详情信息
    todetail(id) {
      this.axios
        .get("/order/comm/commodity/selectCommodityById?id=" + id)
        .then((res) => {
          // console.log('获取详情信息')
          // console.log(res)
          if (res.code == 0) {
            this.baisc = {
              title: res.data.commodity.title,
              brand: res.data.commodity.brandId,
              resource: res.data.commodity.specificationId, //规格
              weight: res.data.commodity.weight,
              newPrice: res.data.commodity.sellPrice,
              oldPrice: res.data.commodity.marketPrice,
              desc: res.data.commodity.comment,
              stock: res.data.commodity.quantityStock, //库存
              cj: res.data.commodity.vender,
              number: "",
              category: res.data.commodity.typeId,
              wareHouse: res.data.commodity.entrepotId, //仓库
              status: res.data.commodity.status,
              gift: res.data.commodity.isComplimentary,
              nort: res.data.commodity.code,
            };
            let obj = {
              img: this.ImgHttps + res.data.commodity.image,
            };
            this.fileList.push(obj);
            this.imageUrl = res.data.commodity.image;
            for (let i = 0; i < res.data.commPermissionsList.length; i++) {
              //销售权限
              this.checkedCities.push(
                res.data.commPermissionsList[i].dictId.toString()
              );
            }
            //Array.prototype.slice.call
            // console.log(this.checkedCities)
            // for(let i =0;i<res.data.commRelatedList.length;i++){//赠品
            // 				this.giftId.push(res.data.commRelatedList[i].id)
            // }
          } //code
        });
    },
    // 图片上传
    safeImport(fileObj) {
      let formData = new FormData();
      formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      this.axios
        .post(
          "/sys/v1/common/upload/files?pathName=internalSystem",
          formData,
          config
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.imageUrl = res.data.url;
            let obj = {
              img: this.ImgHttps + res.data.url,
            };
            this.fileList.push(obj);
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 删除图片
    close(index) {
      this.fileList.splice(index, 1);
      this.imageUrl = "";
    },
    // 图片预览

    is_null(content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
    //上传图标事件
    tolist() {
      let that = this;
      if (that.id == undefined || that.id == "") {
        if (that.imageUrl == "") {
          that.$message.error("商品图片不能为空");
        } else if (that.baisc.title == "") {
          that.$message.error("商品名字不能为空");
        } else if (that.baisc.brand == "") {
          that.$message.error("商品品牌不能为空");
        } else if (that.baisc.category == "") {
          that.$message.error("商品分类不能为空");
        } else if (that.baisc.resource == "") {
          that.$message.error("商品规格不能为空");
        } else if (that.baisc.newPrice == "") {
          that.$message.error("商品价格不能为空");
        } else if (that.baisc.oldPrice == "") {
          that.$message.error("商品市场价不能为空");
        } else if (that.baisc.stock == "") {
          that.$message.error("商品库存不能为空");
        } else if (that.baisc.wareHouse == "") {
          that.$message.error("商品仓库不能为空1");
        } else if (that.checkedCities == "") {
          that.$message.error("销售权限不能为空");
        } else {
          //*** 循环销售权限 ***//
          let commPermissionsList = [];
          for (let i = 0; i < that.checkedCities.length; i++) {
            let obj = { dictId: that.checkedCities[i] };
            commPermissionsList.push(obj);
          }
          //*** 循环销售权限 ***//
          //*** 赠品 ***//
          // let commRelatedList =[];
          // for(let i =0;i<that.giftId.length;i++){
          // 	let obj = {"complimentaryId":that.giftId[i].toString()}
          // 		commRelatedList.push(obj);
          // }
          that.axios
            .post("/order/comm/commodity/addCommodity", {
              brandId: that.baisc.brand,
              commPermissionsList: commPermissionsList,
              comment: that.baisc.desc, //介绍
              createdBy: sessionStorage.getItem("user_id"),
              entrepotId: that.baisc.wareHouse, //商品仓库
              image: that.imageUrl,
              isComplimentary: this.baisc.gift, //是否有赠品
              marketPrice: that.baisc.oldPrice, //商品市场价
              quantityStock: parseInt(that.baisc.stock), //商品库存数量
              securityId: that.checkedCities.toString(), //销售权限
              sellPrice: that.baisc.newPrice, //商品现卖价
              sort: 0,
              specificationId: that.baisc.resource, //商品规格
              status: that.baisc.status, //商品上架状态
              title: that.baisc.title,
              typeId: that.baisc.category[that.baisc.category.length - 1], //商品类别
              weight: that.baisc.weight, //商品重量
              vender: that.baisc.cj,
              commRelatedList: "", //赠品id
              code: this.baisc.nort,
              id: that.id,
            })
            .then((res) => {
              // console.log(res);
              if (res.code == 0) {
                this.$message.success("添加成功");
                that.$router.push("/goodsList");
              } else {
                this.$message.error(res.message);
              }
            });
        }
        // ==
      } else {
        //编辑信息
        if (that.imageUrl == "") {
          that.$message.error("商品图片不能为空");
        } else if (that.baisc.title == "") {
          that.$message.error("商品名字不能为空");
        } else if (that.baisc.brand == "") {
          that.$message.error("商品品牌不能为空");
        } else if (that.baisc.category == "") {
          that.$message.error("商品分类不能为空");
        } else if (that.baisc.resource == "") {
          that.$message.error("商品规格不能为空");
        } else if (that.baisc.newPrice == "") {
          that.$message.error("商品价格不能为空");
        } else if (that.baisc.oldPrice == "") {
          that.$message.error("商品市场价不能为空");
        } else if (that.baisc.stock == "") {
          that.$message.error("商品库存不能为空");
        } else if (that.baisc.wareHouse == "") {
          that.$message.error("商品仓库不能为空1");
        } else if (that.checkedCities == "") {
          that.$message.error("销售权限不能为空");
        } else {
          //*** 循环销售权限 ***//
          let commPermissionsList = [];
          for (let i = 0; i < that.checkedCities.length; i++) {
            let obj = { dictId: that.checkedCities[i] };
            commPermissionsList.push(obj);
          }
          //*** 循环销售权限 ***//
          //*** 赠品 ***//
          // let commRelatedList =[];
          // for(let i =0;i<that.giftId.length;i++){
          // 	let obj = {"complimentaryId":that.giftId[i].toString()}
          // 		commRelatedList.push(obj);
          // }
          //*** 赠品 ***//
          that.axios
            .post("/order/comm/commodity/updateCommodity", {
              brandId: that.baisc.brand,
              commPermissionsList: commPermissionsList,
              comment: that.baisc.desc, //介绍
              updatedBy: sessionStorage.getItem("user_id"),
              entrepotId: that.baisc.wareHouse, //商品仓库
              image: that.imageUrl,
              isComplimentary: this.baisc.gift, //是否有赠品
              marketPrice: that.baisc.oldPrice, //商品市场价
              quantityStock: parseInt(that.baisc.stock), //商品库存数量
              securityId: that.checkedCities.toString(), //销售权限
              sellPrice: that.baisc.newPrice, //商品现卖价
              sort: 0,
              specificationId: that.baisc.resource, //商品规格
              status: that.baisc.status, //商品上架状态
              title: that.baisc.title,
              typeId: that.baisc.category[that.baisc.category.length - 1], //商品类别
              weight: that.baisc.weight, //商品重量
              vender: that.baisc.cj,
              commRelatedList: "", //赠品id
              code: this.baisc.nort,
              id: that.id,
            })
            .then((res) => {
              // console.log(res);
              if (res.code == 0) {
                this.$message.success("编辑成功");
                that.$router.push("/goodsList");
              } else {
                this.$message.error(res.message);
              }
            });
        }
      } //else
    },
    // 保存数据 end
    // 销售权限
    salesScope() {
      this.axios
        .get("/sys/v1/common/by/group?groupId=sales_authority", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.selectList = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      // 赠品列表
      this.axios
        .get("/order/comm/commodity/selectComplimentary", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log("赠品列表")
          // console.log(res);
          if (res.code == 0) {
            this.optionsChexck = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 品牌下拉 **//
    brandSelectBox() {
      this.axios
        .get("/order/comm/commodity/selectList", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log('分类')
          // console.log(res);
          if (res.code == 0) {
            this.brandselect = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      // 查询仓库 //
      this.axios
        .get("/order/comm/commodity/selectCommWarehouse", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log('查询仓库')
          // console.log(res);
          if (res.code == 0) {
            this.house = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      //商品规格//
      this.axios
        .get("/order/comm/commDictonary/list", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log('商品规格')
          // console.log(res);
          if (res.code == 0) {
            this.commDictonary = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 品牌下拉 **//
    // 分类下拉框
    brandSelect() {
      this.axios
        .get("/order/comm/commodity/selectBrand", {
          header: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log('分类')
          // console.log(res);
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 分类下拉框
    prodCode() {
      this.axios
        .get("/order/comm/commodity/generate/prodCode", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.baisc.nort = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.div2 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.baisc {
  background: #fff;
  padding: 10px;
  /deep/.el-input__inner {
    width: 200px;
  }
}
.nav,
.standards {
  margin-left: 100px;
  margin-top: 20px;
}
.selectBox {
  /deep/.el-input {
    display: inline-block;
  }

  /deep/.el-form-item {
    margin-top: 20px;
    display: inline-block;
    width: 300px;
  }
}
/deep/.el-input__inner {
  height: 35px;
  line-height: 35px;
}
.avatar-uploader .el-upload {
  border: 1px solid #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #eee;
}
.demo-form-inline {
  margin-top: 20px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.price {
  /deep/.el-input {
    display: inline-block;
    width: 200px;
  }
  span {
    color: #999;
    display: inline-block;
    margin: 0 30px 0 10px;
  }
}
.stock {
  .el-form-item {
    display: inline-block;
    width: 330px;
  }
  /deep/.el-input {
    display: inline-block;
    width: 200px;
  }
  span {
    font-size: 15px;
    color: #999;
    display: inline-block;
    margin-left: 10px;
  }
}
/deep/.el-textarea {
  width: 600px;
}
.jurisdiction {
  margin-left: 100px;
  margin-top: 20px;
  /deep/.el-checkbox-group {
    display: inline-block;
    margin-left: 30px;
  }
  /deep/.el-button {
    padding: 8px 12px;
  }
}
.notes {
  margin-left: 70px;
  p {
    margin-top: 10px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    img {
      width: 150px;
      height: 150px;
    }
  }
  span {
    display: block;
    width: 18px;
    height: 18px;
    line-height: 20px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: #409eff;
    position: absolute;
    top: -5px;
    right: -6px;
    border-radius: 50%;
  }
}
</style>
